<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ page language="java" import="com.qdairlines.entity.user.User" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    User user = (User) request.getSession().getAttribute("currentUser");
//String language = request.getSession().getAttribute("org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE").toString(); //浏览器语言;
%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>空中入会</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="<%=basePath %>/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/animate.css" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/style.css?v=4.0.0" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="<%=basePath %>/hplus/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <base target="_blank">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">

    <div class="modal inmodal fade" id="fregmentModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">请选择航段</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" checked="" value="0" name="radio1"> <i
                                        id="radio1Content"></i></label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" value="1" name="radio1"> <i id="radio2Content"></i> </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="vue.selectFregment()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="passengerEditModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">旅客信息编辑</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <input name="seatNo" id="seatNo" style="display: none">
                        <div class="form-group">
                            <label>中文名</label>
                            <input type="text" placeholder="请输入中文名" class="form-control" name="psgNameCn"
                                   id="psgNameCn">
                        </div>
                        <div class="form-group">
                            <label>英文名</label>
                            <input type="text" placeholder="请输入英文名" class="form-control" name="psgNameEn"
                                   id="psgNameEn">
                        </div>
                        <div class="form-group">
                            <label>证件号</label>
                            <input type="text" placeholder="请输入证件号" class="form-control" name="etIdNum" id="etIdNum">
                        </div>
                        <div class="form-group">
                            <label>联系方式</label>
                            <input type="text" placeholder="请输入联系方式" class="form-control" name="telNum" id="telNum">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="vue.submitPassenger()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="col-sm-4">
        <h2>标题</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">主页</a>
            </li>
            <li>
                <strong>包屑导航</strong>
            </li>
        </ol>
    </div>-->
</div>

<div class="wrapper wrapper-content" id="content">
    <div class="row">
        <form class="form-horizontal m-t" id="commentForm">
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">航班号:</label>
                    <div class="col-sm-8">
                        <input v-model="fltNo" minlength="2" type="text"
                               class="form-control" required="" aria-required="true" placeholder="请输入航班号">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">航班日期：</label>
                    <div class="col-sm-8">
                        <input v-model="flightDate" id="flightDate" class="laydate-icon form-control layer-date"
                               readonly="readonly"
                               style="max-width: 720px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group" class="col-sm-12 col-md-6 col-lg-4">
                    <label class="col-xs-0 col-sm-3 control-label"></label>
                    <div class="col-xs-6 col-sm-5">
                        <a class="btn btn-primary" v-on:click="getFlightSegments">查询航班</a>
                    </div>
                    <a class="font-bold" style="color: #106D5A;font-size: 15px" @click="showFregmentModal"
                       v-cloak class="col-xs-6 col-sm-4">
                        <%--{{fregment}}--%>TAO->JNN
                    </a>
                </div>
            </div>
        </form>

    </div>
    .
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-10">
            <div class="example">
                <div id="customToolBar">
                    <button id="confirm" class="btn btn-primary" disabled>确认入会</button>
                </div>
                <table id="passengerTable"
                       data-toggle="passengerTable"
                       data-ajax="ajaxRequest"
                       data-side-pagination="server"
                       data-url="/examples/bootstrap_table/data"
                        >
                    <thead>
                    <tr>
                        <th data-field="state" data-formatter="checkFormater" data-checkbox="true"></th>
                        <th data-field="seatNo" data-filter-control="select">座位号</th>
                        <th data-field="psgNameCn" data-filter-control="input">姓名</th>
                        <th data-field="etIdNum">证件号</th>
                        <th data-field="telNum">联系方式</th>
                        <th data-field="Tid" data-formatter="addFormatter">操作</th>
                    </tr>
                    </thead>
                </table>
                <div v-show="isLoading">
                    <div class="spiner-example">
                        <div class="sk-spinner sk-spinner-circle">
                            <div class="sk-circle1 sk-circle"></div>
                            <div class="sk-circle2 sk-circle"></div>
                            <div class="sk-circle3 sk-circle"></div>
                            <div class="sk-circle4 sk-circle"></div>
                            <div class="sk-circle5 sk-circle"></div>
                            <div class="sk-circle6 sk-circle"></div>
                            <div class="sk-circle7 sk-circle"></div>
                            <div class="sk-circle8 sk-circle"></div>
                            <div class="sk-circle9 sk-circle"></div>
                            <div class="sk-circle10 sk-circle"></div>
                            <div class="sk-circle11 sk-circle"></div>
                            <div class="sk-circle12 sk-circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-1"/>
    </div>
</div>
</div>

<!-- 全局js -->
<script src="<%=basePath %>/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=basePath %>/hplus/js/bootstrap.min.js?v=3.3.5"></script>

<!-- 自定义js -->
<script src="<%=basePath %>/hplus/js/content.js?v=1.0.0"></script>
<!-- Bootstrap table -->
<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Peity -->

<script src="<%=basePath %>/hplus/js/utils.js"></script>
<script src="<%=basePath %>/hplus/js/constant.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/layer/laydate/laydate.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script src="<%=basePath %>/hplus/js/vue/vue.js"></script>
<!-- Sweet alert -->
<script src="<%=basePath %>/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>

<script>

    var vue = new Vue({
        el: '#content',
        data: {
            fltNo: "",//航班编号
            flightDate: getNowFormatDate(),//航班时间
            isLoading: false,//是否处于加载状态
            origAirport: "",//航段始发机场三字码
            destAirport: "",//航段终点机场三字码
            fregment: "",//航段列表,
            fregments: [],
            passengers: [],
            passenger: null,
            addedList: "-",
        },
        mounted: function () {
            _self = this;
            $('#passengerTable').bootstrapTable({
                data: [],
                striped: true,
                onlyInfoPagination: true,
                filter: true,
            });

            laydate({
                elem: '#flightDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                format: 'YYYY-MM-DD',
                istoday: true, //是否显示今天
                max: getNowFormatDate(), //最大日期
                choose: function (datas) {
                    _self.flightDate = datas;
                }
            });

        },
        methods: {
            //获取航段并根据航段数量分别处理
            getFlightSegments: function () {
                if (!this.fltNo) {
                    console.log(getNowFormatDate);
                    warningAlert("航班号不能为空!");
                    return false;
                }
                if (!this.flightDate) {
                    warningAlert("航班日期不能为空!");
                    return false;
                }
                //自动补全航班号
                this.fltNo = this.fltNo.toUpperCase();
                if (this.fltNo.charAt(0) != 'Q') {
                    this.fltNo = "QW" + this.fltNo;
                }
                var _self = this;
                this.isLoading = true;
                this.addedList = "-";
                $('#passengerTable').bootstrapTable('load', []);
                $('#passengerTable').bootstrapTable('resetSearch', "");
                $.ajax({
                    type: "get",
                    url: BASE_URL + '/flightSegments',
                    data: {
                        flt_num: this.fltNo,
                        flt_date: this.flightDate,
                    },
                    async: true,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == 1) {
                            var result = data.result;
                            _self.fregments = result;
                            if (!result || !result.lenght == 0) {
                                _self.passengerStatisticsList = [];
                                warningAlert("未查询到当日航班！");
                            } else if (result.length == 1) {//单航段航班，直接获取旅客列表
                                _self.origAirport = result[0].orig;
                                _self.destAirport = result[0].dest;
                                _self.fregment = _self.origAirport + "->" + _self.destAirport;
                                _self.getPassengers();
                            } else {//多航段航班，先选择航段再获取旅客列表
                                _self.showFregmentModal();
                                _self.isLoading = false;
                                return false;
                            }
                        } else {
                            _self.passengers = [];//清空旅客列表
                            _self.isLoading = false;
                            exceptionAlert(data);
                        }
                    },
                    error: function (obj) {
                        errorAlert("服务器无响应");
                        _self.isLoading = false;
                        return false;
                    }
                });
            },
            /**
             *获取旅客列表并整理数据，匹配前端显示
             */
            getPassengers: function () {
                var _self = this;
                _self.isLoading = true;
                $.ajax({
                    type: "get",
                    url: BASE_URL + '/departPassengers',
                    data: {
                        flt_num: this.fltNo,
                        flt_date: this.flightDate,
                        orig_airport: this.origAirport,
                        dest_airport: this.destAirport,
                    },
                    async: true,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == 1) {
                            var result = data.result;
                            if (!result || !result.lenght == 0) {
                                warningAlert("未查询到旅客");
                            } else {
                                _self.passengers = result;
                                //添加序号字段
                                result.forEach(function (value, index, array) {
                                    value.Tid = index + 1;
                                    if (value.psgNameCn) {
                                        value.psgNameCn = value.psgNameCn.replace("/", "");
                                    }
                                    if (value.psgNameEn) {
                                        value.psgNameEn = value.psgNameEn.replace("/", "");
                                    }
                                });
                                $('#passengerTable').bootstrapTable('load', _self.passengers);
                            }
                        } else {
                            exceptionAlert(data);
                        }
                        _self.isLoading = false;
                    },
                    error: function (obj) {
                        errorAlert("服务器无响应");
                        _self.isLoading = false;
                        return false;
                    }
                });
            },

            //显示航段选择modal
            showFregmentModal: function () {
                if (this.fregments != null && this.fregments.length > 1) {
                    $('#radio1Content').text(this.fregments[0].orig + "->" + this.fregments[0].dest);
                    $('#radio2Content').text(this.fregments[1].orig + "->" + this.fregments[1].dest);
                    $("#fregmentModal").modal("toggle");
                }
            },
            //获取和处理选中的航段
            selectFregment: function () {
                var num = $('input:radio:checked').val();
                var fregment = this.fregments[num];
                this.origAirport = fregment.orig;
                this.destAirport = fregment.dest;
                this.fregment = this.origAirport + "->" + this.destAirport;
                this.getPassengers();
            },
            //弹出旅客信息编辑框
            editPassenger: function (Tid) {
                this.passenger = this.passengers[Tid - 1];
                for (var index in this.passenger) {
                    $('#passengerEditModal #' + index).val(this.passenger[index]);
                }
                $('#passengerEditModal').modal("toggle");
            },
            //根据ID信息获取旅客列表中的该乘客
            getPassengerByIdNum: function (idNum) {
                for (var i = 0; i < this.passengers.length; i++) {
                    if (this.passengers[i].etIdNum == idNum) {
                        break;
                    }
                }
                return this.passengers[i];
            },
            //提交新入会的旅客信息
            submitPassenger: function () {
                _self = this;
                var passenger = {};
                passenger.passengerName = $('#psgNameCn').val();
                passenger.passengerNameEn = $('#psgNameEn').val();
                passenger.certNo = $('#etIdNum').val();
                passenger.mobile = $('#telNum').val();
                passenger.flightDate = this.flightDate;
                passenger.flightNo = this.fltNo;
                passenger.orig = this.passenger.orig;
                passenger.dest = this.passenger.dest;
                passenger.seatNo = this.passenger.seatNo
                var passengerStr = JSON.stringify(passenger);//json对象转换为字符串
                $.ajax({
                    type: "POST",
                    url: VIP_MARKETING_URL + '/tblFfpAirRegisters',
                    data: passengerStr,
                    async: true,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == 1) {
                            _self.addedList += _self.passenger.Tid + "-";
                            $('#passengerTable').bootstrapTable('updateRow', {
                                index: (_self.passenger.Tid - 1),
                                row: _self.passenger
                            });
                            successToast("保存成功！");
                        } else if (data.status == -2) {
                            exceptionAlert(data);
                            _self.addedList += _self.passenger.Tid + "-";
                            $('#passengerTable').bootstrapTable('updateRow', {
                                index: (_self.passenger.Tid - 1),
                                row: _self.passenger
                            });
                        } else {
                            exceptionAlert(data);
                        }
                    },
                    error: function (obj) {
                        errorAlert("服务器无响应");
                        _self.isLoading = false;
                        return false;
                    }
                });
            }
        },
        filters: {
            //截取日期的小时和分钟部分
            hourAndMinGet: function (value) {
                if (!value) return '';
                return value.substring(11, 16);
            }
        },
    });

    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
    });

    function addFormatter(value) {
        var result = vue.addedList.indexOf("-" + value + "-");
        return '<button type="button" class="btn btn-w-m btn-primary" ' + ((result != -1) ? "disabled" : "") + ' onclick="vue.editPassenger( ' + "'" + value + "'" + ')">入会</button>';
        //return '<a href="https://github.com/wenzhixin/' + value + '">' + value + '</a>';
    }

</script>


</body>

</html>